<!-- 百叶窗组件 -->
<script lang="ts" setup>
const props = defineProps<{ imagesList: string[] }>();
const options = reactive({
  containerWidth: 1050, // 窗口宽度
  leaf: [192 * 3, 108 * 3], // 叶片尺寸 宽 高
});
const open = reactive({
  inx: 0,
  show: false, // 开合
});
const leafLeft = (inx: number) => {
  // 开
  if (open.show) {
    // 剩余合叶宽度
    let gap =
      (options.containerWidth - options.leaf[0]) /
      (props.imagesList.length - 1);
    // 开叶 右侧的每叶 left + 开叶宽度
    if (inx > open.inx) return gap * (inx - 1) + options.leaf[0];
    else return gap * inx;
  }
  // 合
  else return (options.containerWidth / props.imagesList.length) * inx;
};
const mouseEnter = (inx: number) => {
  open.inx = inx;
  open.show = true;
};
const mouseLeave = () => (open.show = false);
</script>

<template>
  <div class="persiennes">
    <div class="persiennes-container">
      <div
        class="persiennes-leaf"
        v-for="(leaf, inx) in imagesList"
        :key="inx"
        :style="{ left: `${leafLeft(inx)}px` }"
        @mouseenter="mouseEnter(inx)"
        @mouseleave="mouseLeave"
      >
        <img class="leaf" :src="leaf" alt="" />
        <div class="index">{{ inx + 1 }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.persiennes {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(
    to bottom right,
    #ffc09c,
    #fef0cd,
    #acfdee,
    #ecbcbc,
    #a6a0c0,
    #7098bb
  );
  .persiennes-container {
    position: relative;
    width: v-bind("options.containerWidth + 20 + 'px'");
    height: v-bind("options.leaf[1] + 20 + 'px'");
    margin: 200px auto;
    border: 10px dotted white;
    border-radius: 8px;
    box-shadow: 0 0 60px rgba($color: orangered, $alpha: 0.5);
    background-color: #fff;
    overflow: hidden;
    .persiennes-leaf {
      position: absolute;
      height: v-bind("options.leaf[1] + 'px'");
      border-radius: 4px;
      overflow: hidden;
      transition: 0.3s ease-in-out;
      .leaf {
        height: 100%;
      }
      .index {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 36px;
        height: 36px;
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        line-height: 28px;
        text-align: center;
        border: 4px solid #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
